{% extends 'baseadmin.html' %}

{% block title %}Minio 图片浏览{% endblock %}

{% block styles %}
{{ super() }}
<!-- 本页所用的CSS -->
<style>

    /* CSS 树状结构 */
    ul.tree, ul.tree ul {
        list-style-type: none;
        background: url("{{ url_for('static', filename='images/vline.png') }}") repeat-y;
        margin: 0;
        padding: 0;
    }

    ul.tree ul {
        margin-left: 10px;
    }

    ul.tree li {
        margin: 0;
        padding: 0 12px;
        line-height: 20px;
        background: url("{{ url_for('static', filename='images/node.png') }}") no-repeat;
        color: #369;
        font-weight: bold;
        cursor: pointer;
    }
    ul.tree li:last-child {
        background: #fff url("{{ url_for('static', filename='images/lastnode.png') }}") no-repeat;
    }
    /* 为叶节点添加特定样式 */
    ul.tree li.leaf {
        color: #666;
        font-weight: lighter;
    }

    /* 图片宽度 */
    .cardwh {
        width: 18rem;
    }
    .cardwh img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        /*圆角*/
        border-radius: 5px;
    }
    .showbig {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.8);
        cursor: zoom-out;
    }
</style>
<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

{% endblock %}


{% block maincontent %}

<!-- 放置一个图像列表页面 
    bootstap5 布局：
    1. 一行两列（3：8）布局，左侧为目录列表，右侧为图像列表
    2. 目录列表：使用DIV+CSS+JS的树状结构，点击目录可以展开/收缩
    3. 视频列表：使用DIV+CSS+JS的瀑布流布局，点击图像可以查看大图
-->
<h3>Minio MV-预览</h3>
<div class="container mt-3">
    <div class="row">
        <div class="col-lg-3">
            <div class="card mb-4">
                <div class="card-header">
                    视频目录：video/
                </div>
                <div class="card-body">
                    <input id="srcdir" type="text" value="video/">
                    <div id="mvdir" class="border rounded">
                        {{ ulhtml | safe }}

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="card mb-4">
                <div class="card-header">
                    视频列表
                    <!-- https://minio.51epub.com/static/images/bigpic/t01fa04dc2ae724b56e.jpg -->
                </div>
                <div class="card-body">
                    <!-- 使用瀑布流布局展示视频列表 -->
                    <div id="mcimglst" class="d-flex flex-column">
                        <h2>点击左边目录，查看目录下面的视频列表....</h2>
                        <div class="card cardwh">
                            <img src="https://minio.51epub.com/static/images/bigpic/t01fa04dc2ae724b56e.jpg" alt="t01fa04dc2ae724b56e.jpg">
                            <div class="card-body">
                                <p class="card-text">t01fa04dc2ae724b56e.jpg (0.8 M)</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block adminscripts %}
{{ super() }}
<!-- 本页中所用的JavaScript -->
<script>
    function getImgList(path, pagenum=1) {
        var _routeurl = "{{ url_for('mcpicview.getmvlist') }}?mvpath="+path+"&page="+pagenum;
        var htmlstr = "";
        var imglstele = document.getElementById("mcimglst");
        fetch(_routeurl)
            .then(response => response.text())
            .then(data => {
                htmlstr = data;
                imglstele.innerHTML = htmlstr;
            });
        
        // 滚动到顶部
        window.scrollTo(0, 0);
        
    }

    /**
     * 1- 图片目录列表（树状结构）
     * 例如：
            <ul class="tree">
                <li>bigpic</li>
                <li>mobwall
                <ul>
                    <li>class1</li>
                    <li>class2</li>
                </ul>
                </li>
                <li>redbookbg
                <ul>
                    <li>class2</li>
                </ul>
                </li>
            </ul>
     * 
     * 2- 将目录列表展示在左侧的DIV中
     * 3- 在左侧目录树中，点击枝干目录可以展开/收缩
     * 4- 在左侧目录树中，点击叶子目录可以在右侧DIV中展示图片列表
     * */ 

    document.addEventListener("DOMContentLoaded", function() {
        // 原始目录
        var mcsrcdir = document.getElementById("srcdir").value;

        // 初始化时收缩所有节点
        var tree = document.querySelectorAll("ul.tree ul");
        for (var i = 0; i < tree.length; i++) {
            tree[i].style.display = "none";
        }

        // 为叶节点添加特定类名
        var treeItems = document.querySelectorAll("ul.tree li");
        for (var i = 0; i < treeItems.length; i++) {
            if (treeItems[i].querySelector("ul") == null) {
                treeItems[i].classList.add("leaf");
            }

        }

        // 添加点击事件处理程序
        var treeItems = document.querySelectorAll("ul.tree li");
        for (var i = 0; i < treeItems.length; i++) {
            treeItems[i].addEventListener("click", function(event) {
                // 获取当前节点的路径
                var path = mcsrcdir + this.getAttribute("data-path") + "/";
                console.log("li节点：" + this.innerText + "，路径：" + path);
                // 使用fetch 异步获取目录下的图片文件列表，后端返回text/html
                getImgList(path);

                // 阻止事件冒泡
                event.stopPropagation();

                // 如果当前节点是展开的，则收缩，否则展开当前节点
                var childUl = this.querySelector("ul");
                if(childUl == null) {
                    return;
                }else{
                    if (childUl.style.display == "none") {
                        childUl.style.display = "block";
                    } 
                }
                
            });
        }
    });

    /**
     * 图片列表瀑布流布局(对div id="mcimglst" 的子元素(div class="card)进行懒加载，对超出视窗的子元素进行隐藏，鼠标滚动加载)
     * 输入：卡片列表
     * 1- 计算当前视窗的高度
     * 2- 获取所有卡片列表
     * 3- 获取单个卡片card的高度
     * */ 
    document.addEventListener("DOMContentLoaded", function() {
        var imglstele = document.getElementById("mcimglst");
        // 获取所有卡片列表
        var cards = document.querySelectorAll(".cardwh");
        // 计算当前视窗的高度
        var viewportHeight = window.innerHeight;
        // 获取单个卡片的高度
        var cardHeight = cards[0].offsetHeight;
        // 计算初始加载的卡片数量，多加载一些防止出现空白
        var cardsPerLoad = Math.ceil(viewportHeight / cardHeight) + 2;
        var currentIndex = 0;

        // 初始化所有卡片为隐藏状态
        for (var i = 0; i < cards.length; i++) {
            cards[i].style.display = 'none';
        }

        // 加载卡片函数
        function loadCards() {
            for (var i = currentIndex; i < currentIndex + cardsPerLoad && i < cards.length; i++) {
                cards[i].style.display = 'block';
                
            }

            currentIndex += cardsPerLoad;
        }

        // 初次加载卡片
        loadCards();

        // 监听滚动事件
        window.addEventListener('scroll', function() {
            // 判断是否滚动到底部
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 100) {
                loadCards();
            }
        });

        // 监听窗口大小变化事件
        window.addEventListener('resize', function() {
            // 重新计算视窗高度
            viewportHeight = window.innerHeight;
            // 重新计算加载卡片数量
            cardsPerLoad = Math.ceil(viewportHeight / cardHeight) + 2;
            // 重新加载卡片
            loadCards();
        });

        // 监听imglstele的change事件
        imglstele.addEventListener('change', function() {
            // 重新加载卡片
            console.log("后端获取视频列表后，重新加载卡片，用于懒加载");
            loadCards();
        });


    });

    
</script>

<script src="https://s4.zstatic.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

{% endblock %}